<script lang='ts' setup>
import { ref, reactive } from 'vue'
import queryUserServiceApi from '/@/api/org/query/query-user'
import { useStore } from '/@/store';
import { UserEditUrl, UserAddUrl } from '/@/views/org/mapping.json'
import { jumpPath } from '/@/utils/router-kit'
const UserListTableRef = ref();
const storeUser = useStore().state.user;

const props = defineProps({
    queryParam: Object
})

const UserTableState = reactive({
    queryColumn: [
        { name: 'likeAll', type: 'input', label: '用户账号/用户名称' }
    ],
    /**查询参数 */
    queryparam: { likeAll: null, id: storeUser.orgId, subOrgId: storeUser.subOrgId },
    /**
     * 表格选中的数据主键
     */
    selectionPkList: [] as string[],
    /**
     * 表格选中的数据
     */
    selectionListData: [] as any[],
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "userAccount", label: "用户账号", width: "180", sort: { sortable: 'custom' }, type: 'link',
            linkClick: (row: any) => jumpPath(UserEditUrl + row.userId + "?unitId=" + props.queryParam?.unitId)
        },
        { prop: "userFullname", label: "用户名称" },
        { prop: "unitName", label: "部门名称" },
        { prop: "main", label: "主要部门", slot: "mainSlot" },
        { prop: "valid", label: "是否有效", slot: "validSlot" },
        { prop: "userAccountLocked", label: "是否锁定", slot: "userAccountLockedSlot" },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => queryUserServiceApi.queryPage({ queryName: 'userList' }, { ...props.queryParam, ...params, ...UserTableState.queryparam, refCols: 'default' }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => queryUserServiceApi.exportData({ queryName: 'userList', refCols: 'default' }, { ...props.queryParam, ...params, ...UserTableState.queryparam }),
    /**
     * 表格选中事件
     */
    tableSelectionChange: (dataList: any[], pkList: string[]) => {
        UserTableState.selectionListData = dataList
        UserTableState.selectionPkList = pkList
    },
    //新增数据方法
    onAddButtonClick: () => {
        jumpPath(UserAddUrl, { unitId: props.queryParam?.unitId })
    },
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        //deletePageTableSelectionDataList(UserListTableRef, dictionaryTypeApi);
    },

    /**
     * 查询事件
     */
    onSearch: () => UserListTableRef.value.loadTable()
})

defineExpose({
    getUserListTableRef: () => UserListTableRef.value,
    onDeleteButtonClick: () => UserTableState.deleteTableData(),
    onAddButtonClick: () => UserTableState.onAddButtonClick(),
    selectionPkList: () => UserTableState.selectionPkList,
    selectionListData: () => UserTableState.selectionListData
})

</script>
<template>
    <jxtech-page-table
        ref="UserListTableRef"
        row-key="userId"
        table-height="calc(100vh - 190px)"
        :table-column="UserTableState.tableColumn"
        :load-data="UserTableState.loadData"
        :exp-data="UserTableState.expData"
        @selection-change="UserTableState.tableSelectionChange"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <jxtech-search-form
                    :query-column="UserTableState.queryColumn"
                    :query-form="UserTableState.queryparam"
                    @handle-search="UserTableState.onSearch"
                    :col-span="16"
                ></jxtech-search-form>
            </div>
        </template>

        <template #mainSlot="{ row }">
            <el-checkbox v-model="row.main" true-label="Y" false-label="N" disabled></el-checkbox>
        </template>
        <template #validSlot="{ row }">
            <el-checkbox v-model="row.valid" true-label="Y" false-label="N" disabled></el-checkbox>
        </template>
        <template #userAccountLockedSlot="{ row }">
            <el-checkbox v-model="row.userAccountLocked" true-label="Y" false-label="N" disabled></el-checkbox>
        </template>
    </jxtech-page-table>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: var(--el-checkbox-checked-input-border-color);
}
</style>